<!-- 地图选点部分 -->
<div class="form-group">
    <label>地理位置</label>
    <div id="mapContainer" style="height: 400px; margin-bottom: 15px;"></div>
    <div class="input-group mb-3">
        <input type="text" class="form-control" id="searchAddress" 
               placeholder="输入地址搜索...">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" 
                    onclick="searchLocation()">
                <i class="fas fa-search"></i> 搜索
            </button>
        </div>
    </div>
    <input type="text" class="form-control" id="address" name="address" 
           th:value="${station != null ? station.address : ''}" 
           placeholder="详细地址" required>
    <input type="hidden" id="latitude" name="latitude" 
           th:value="${station != null ? station.latitude : ''}">
    <input type="hidden" id="longitude" name="longitude" 
           th:value="${station != null ? station.longitude : ''}">
</div>

<script th:src="@{/js/map-component.js}"></script>
<script th:inline="javascript">
let mapComponent;
let selectedLocation = null;

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const station = /*[[${station}]]*/ null;
        mapComponent = new BaiduMapComponent('mapContainer', {
            center: station ? [station.longitude, station.latitude] : [116.404, 39.915],
            zoom: station ? 16 : 12,
            enableGeolocation: !station,
            onMapInitialized: function(map) {
                if (station) {
                    // 如果是编辑模式，添加回收站标记
                    selectedLocation = {
                        lat: station.latitude,
                        lng: station.longitude
                    };
                    mapComponent.addMarker('station', 
                        new BMapGL.Point(station.longitude, station.latitude));
                }

                map.addEventListener('click', function(e) {
                    // 清除之前的标记
                    mapComponent.clearAllMarkers();
                    // 添加新标记
                    selectedLocation = e.latlng;
                    mapComponent.addMarker('selected', 
                        new BMapGL.Point(e.latlng.lng, e.latlng.lat));
                    // 获取地址信息
                    mapComponent.reverseGeocode(new BMapGL.Point(e.latlng.lng, e.latlng.lat))
                        .then(result => {
                            document.getElementById('address').value = result.address;
                            document.getElementById('latitude').value = e.latlng.lat;
                            document.getElementById('longitude').value = e.latlng.lng;
                        })
                        .catch(error => {
                            console.error('获取地址失败:', error);
                        });
                });
            }
        });
        
        await mapComponent.init();
    } catch (error) {
        console.error('地图初始化失败:', error);
    }
});

function searchLocation() {
    const address = document.getElementById('searchAddress').value;
    if (!address) {
        alert('请输入要搜索的地址');
        return;
    }

    mapComponent.geocode(address)
        .then(point => {
            mapComponent.clearAllMarkers();
            selectedLocation = {
                lat: point.lat,
                lng: point.lng
            };
            mapComponent.addMarker('selected', point);
            mapComponent.setView([point.lng, point.lat], 16);
            
            // 更新表单字段
            document.getElementById('address').value = address;
            document.getElementById('latitude').value = point.lat;
            document.getElementById('longitude').value = point.lng;
        })
        .catch(error => {
            console.error('地址搜索失败:', error);
            alert('未找到该地址，请重试');
        });
}
</script> 